<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
  //1.构建组件化构造器对象(有语法糖简写方式)
  const cpn = Vue.extend({
    template: '<div>\n' +
            '    <h1>你好</h1>\n' +
            '    <h2>哈哈哈哈</h2>\n' +
            '    <h3>呵呵呵呵</h3>\n' +
            '  </div>'
  })
  //2.注册组件
  Vue.component('my-cpn',cpn)


  const vm = new Vue({
    el: '#app',
    data: {
      message: '你好啊！！'
    }
  })
</script>

</body>
</html>